<template>
  <div>
    <Card :bordered="false" :dis-hover="true">
      <p slot="title">
        Crontab日程列表
        <label
          style="cursor: pointer; margin-left: 5px"
          @click="cronHelpInfo = true"
        >
          <Icon type="md-help-circle" />
        </label>
      </p>
      <div slot="extra">
        <Button
          type="primary"
          size="small"
          class="card-extra-item"
          @click="createCrontabSchedule = true"
          >创建日程</Button
        >
        <Button
          type="primary"
          size="small"
          icon="ios-refresh"
          class="card-extra-item"
          @click="search"
          >刷新
        </Button>
      </div>
      <Table
        highlight-row
        :columns="crontabScheduleColumns"
        :data="crontabScheduleData"
        border
        size="small"
      >
        <template slot-scope="{ row }" slot="action">
          <Button
            size="small"
            type="text"
            style="color: #2d8cf0"
            @click="showEditCrontabScheduleModal(row)"
            >编辑</Button
          >
          <Poptip
            title="确定要删除吗?"
            :confirm="true"
            :transfer="true"
            @on-ok="handleDeleteCrontabSchedule(row.id)"
          >
            <Button
              size="small"
              type="text"
              style="color: #ed4014"
              >删除</Button
            >
          </Poptip>
        </template>
      </Table>
      <Page
        transfer
        :total="page.total"
        :current="page.current"
        :page-size="page.pageSize"
        :page-size-opts="page.pageSizeOpts"
        size="small"
        show-elevator
        show-sizer
        show-total
        prev-text="上一页"
        next-text="下一页"
        style="margin-top: 15px"
        @on-change="change"
        @on-page-size-change="pageSizeChange"
      />
    </Card>
    <CrontabScheduleCreate
      :createCrontabSchedule.sync="createCrontabSchedule"
      @initCrontabScheduleTable="search"
    ></CrontabScheduleCreate>
    <CrontabScheduleEdit
      :editCrontabSchedule.sync="editCrontabSchedule"
      :crontabSchedule="crontabSchedule"
      @initCrontabScheduleTable="search"
    ></CrontabScheduleEdit>
    <CrontabHelpInfo :crontabHelpInfo.sync="cronHelpInfo"></CrontabHelpInfo>
  </div>
</template>

<script>
import {
  getCrontabSchedules,
  deleteCrontabSchedule,
} from "@/api/CeleryScheduledTaskService/crontab-schedule";
import CrontabScheduleCreate from "@/view/components/CeleryScheduledTaskService/crontab-schedule/crontab-schedule-create";
import CrontabScheduleEdit from "@/view/components/CeleryScheduledTaskService/crontab-schedule/crontab-schedule-edit";
import CrontabHelpInfo from "@/view/components/CeleryScheduledTaskService/crontab-schedule/crontab-help-info";

export default {
  name: "crontab-schedule",
  components: {
    CrontabScheduleCreate,
    CrontabScheduleEdit,
    CrontabHelpInfo,
  },
  data() {
    return {
      createCrontabSchedule: false,
      editCrontabSchedule: false,
      cronHelpInfo: false,
      crontabSchedule: {},
      crontabScheduleColumns: [
        {
          type: "index",
          width: 60,
          align: "center",
        },
        {
          title: "Minute(s)",
          key: "minute",
          minWidth: 200,
          align: "center",
        },
        {
          title: "Hour(s)",
          key: "hour",
          minWidth: 200,
          align: "center",
        },
        {
          title: "Day(s) Of The Week",
          key: "day_of_week",
          minWidth: 200,
          align: "center",
        },
        {
          title: "Day(s) Of The Month",
          key: "day_of_month",
          minWidth: 200,
          align: "center",
        },
        {
          title: "Month(s) Of The Year",
          key: "month_of_year",
          minWidth: 200,
          align: "center",
        },
        {
          title: "操作",
          slot: "action",
          width: 125,
          align: "center",
          fixed: "right",
        },
      ],
      crontabScheduleData: [],
      page: {
        current: 1,
        total: 0,
        pageSize: 50,
        pageSizeOpts: [10, 30, 50, 100, 200],
      },
    };
  },
  mounted() {
    this.search();
  },
  methods: {
    search(page) {
      let data = {
        page: 1,
        page_size: this.page.pageSize,
      };
      if (typeof page == "number") {
        data.page = page;
      }
      this.page.current = data.page;

      getCrontabSchedules(data)
        .then((res) => {
          const data = res.data;
          this.crontabScheduleData = data.results;
          this.page.total = data.count;
        })
        .catch((err) => {
          this.$Modal.error({
            title: "系统异常，请联系管理员……",
            content: JSON.stringify(err),
            closable: true,
          });
        });
    },

    handleDeleteCrontabSchedule(id) {
      deleteCrontabSchedule(id)
        .then((res) => {
          if (res.status === 204) {
            this.$Message.info("删除成功");
            this.search();
          } else {
            this.$Message.error("删除失败");
          }
        })
        .catch((err) => {
          this.$Modal.error({
            title: "系统异常，请联系管理员……",
            content: JSON.stringify(err),
            closable: true,
          });
        });
    },

    showEditCrontabScheduleModal(row) {
      this.crontabSchedule = { ...row };
      this.editCrontabSchedule = true;
    },

    change(val) {
      this.page.current = val;
      this.search(val);
    },

    pageSizeChange(val) {
      this.page.pageSize = val;
      this.search();
    },
  },
};
</script>

<style scoped>
</style>
